<template>
  <div class="info-box">
    <div class="info-item" v-for="(value, key) in userInfo" :key="key">
      <div class="title">{{ key }}:</div>
      <div class="text">{{ value }}</div>
    </div>
  </div>
</template>

<script lang="tsx" setup>
const { userInfo } = defineProps({
  userInfo: {
    type: Object,
    default: () => ({}),
  },
});
</script>

<style lang="scss" scoped>
.info-box {
  width: 380px;
  background: #f7f8fa;
  border-radius: 4px;
  padding: 18px;
  margin-left: 120px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #86909c;
  gap: 10px;
  .info-item {
    display: flex;
    gap: 10px;
  }
}
</style>
